<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-全选和反选案例</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <script>
      // 全选按钮
      $(function () {
        $("button:first").click(function () {
          let $input = $("input");
          $input.prop("checked", true);
        });
        // 全否按钮
        $("button").eq(1).click(function () {
          let $input = $("input");
          $input.prop("checked" , false);
        });

        // 反选按钮
        $("button").eq(2).click(function () {
          let $inputArr = $("input");
          // fori 遍历没有快捷键手动输循环
          for (let i = 0; i < $inputArr.length; i++) {
            let $input = $inputArr.eq(i);
            $input.prop("checked", !($input.prop("checked")));
          }
        });

      });
    </script>
</head>
<body>
  <input type="checkbox" name="hobby">唱歌
  <input type="checkbox" name="hobby">跳舞
  <input type="checkbox" name="hobby">rap
  <input type="checkbox" name="hobby">篮球
  <input type="checkbox" name="hobby">写bug
  <input type="checkbox" name="hobby">购物
  <button>全选</button>
  <button>全否</button>
  <button>反选</button>
</body>
</html>